<template>
	<div>
		<div style="position: relative;height: 300px;padding:20px;border-radius: 8px;" class="bgfff">

			<div style="display: flex;">
				<div style="width: 180px;display:flex">
					<div class="fontBold mr10">问题工单</div>
					<div
						style="color:#121212;background:#DBEEEE;line-height:24px;height:24px;padding: 0 5px;border-radius: 8px;min-width: 25px;text-align: center;">
						{{dataList1.length}}
					</div>
				</div>

				<div style="width: calc(100% - 180px);height:260px;overflow-y:auto">
					<div v-for="(item,index) in dataList1" :key="index"
						:style="{'marginBottom':index==(dataList1.length -1)?'':'10px','paddingBottom':index==(dataList1.length -1)?'':'10px'}"
						style="display: flex;justify-content: space-between;border-bottom: 1px solid#F8F7F9;">
						<div style="width: calc(100% - 400px);border-right: 1px solid#F8F7F9;cursor: pointer;"
							@click="gotoDetail(item)">

							<div style="display: inline-block;margin-bottom: 10px;">
								<div style="color: #121212;font-size: 15px;font-weight: bold;margin-bottom: -7px;">
									<span>{{item.scheduleTypeStr}}</span>
									<span class="font12" v-if="item.outletName">（{{item.outletName}}·{{item.defenceName}}）</span>
								</div>
								<div style="background: #DBEEEE;width: 100%;height:4px"></div>
							</div>


							<div style="color:#888;display: flex;justify-content: space-between;">
								<div style="width:calc(100% - 120px)">{{item.problemContent}}</div>
								<div style="margin-left: 20px;width:120px;font-size:13px">{{item.dateDiffStr}}</div>
							</div>
						</div>


						<div style="width: 400px;text-align: left;padding-top: 10px;">
							<el-steps :space="200" :active="item.active" align-center>
								<el-step v-for="(item1,index1) in item.itemList" :key="index1"
									:title="item1.itemTypeStr">
									<i v-if="item1.isExist" class="step01" slot="icon"></i>
									<i v-else-if="item1.status=='ONGOING'" class="step02" slot="icon"></i>
									<div v-else slot="icon"
										style="width: 18px;height: 18px;border-radius: 50%;border: 1px solid rgb(221, 221, 221);background: #fff;margin-bottom: 6px;">
									</div>
								</el-step>
							</el-steps>
						</div>
					</div>
					<el-empty v-if="dataList1.length == 0" />
				</div>
			</div>
		</div>

		<div class="bgfff" style="margin-top: 20px;padding: 20px 10px;display:flex">
			<div style="flex:2">

				<div class="displayFlexBet">
					<div class="displayFlex bgfff bra20 brderE1EBF6 ml10 elDataPicker">
						<span style="color:#888;font-size:14px" class="mr10">开始日期</span>
						<el-date-picker class="width100" v-model="params.startTime" type="month" style="width: 150px;"
							@change="changeDate()" value-format="yyyy-MM" placeholder="选择开始日期" :clearable="false">
						</el-date-picker>
						<img src="@/assets/icon5.png" style="width: 15px;height: 8px;margin:0 20px;" />
						<span style="color:#888;font-size:14px" class="mr10">结束日期</span>
						<el-date-picker class="width100" v-model="params.endTime" type="month" @change="changeDate()"
							value-format="yyyy-MM" placeholder="选择结束日期" style="width: 150px;" :clearable="false">
						</el-date-picker>
					</div>

					<div class="date-item displayFlex">
						<el-select v-model="params.scheduleType" filterable remote placeholder="选择类型"
							@change="changeDate()" clearable>
							<el-option key="WASTE_GAS" label="废气" value="WASTE_GAS" />
							<el-option key="WASTE_WATER" label="废水" value="WASTE_WATER" />
						</el-select>
						<i v-if="params.scheduleType" class="el-icon-error"
							style="margin-bottom: 6px;color:#999;margin-right:10px"
							@click="params.scheduleType ='',changeDate()"></i>
						<i class="el-icon-caret-bottom" style="margin-bottom: 6px;"></i>
					</div>
				</div>
				<div id="chart2" style="width:100%;height:400px"></div>
			</div>
			<div id="chart1" style="flex:1;height:400px">
			</div>
		</div>


		<div style="width: calc(100% - 180px);height:100%;overflow-y:auto;margin-left:20px;padding-top:40px">
			<div v-for="(item,index) in completeDataList" :key="index"
				:style="{'marginBottom':index==(completeDataList.length -1)?'':'45px','paddingBottom':index==(completeDataList.length -1)?'':'10px'}"
				style="display: flex;border-bottom: 1px solid#F8F7F9;position: relative;">
				
				<div v-if="index == 0" style="border: 1px solid #DFDFDF;width:1px;height:50px;position: absolute;left:24px;top:-43px"></div>
				
				<div style="position: relative;">
					<div style="width: 9px;height: 9px;border-radius: 50%;border: 3px solid #D2D2D2;margin:5px 20px"></div>
					<div v-if="index != completeDataList.length -1" 
					style="border: 1px solid #DFDFDF;width:1px;height:120px;position: absolute;right:49%;top:15px"></div>
				</div>
				
				
				<div style="width: calc(100% - 400px);border-right: 1px solid#F8F7F9;cursor: pointer;"
					@click="gotoDetail(item)">
		
					<div style="margin-bottom: 10px;" class="displayFlex">
						<div style="color:#8A8A8A" class="mr10">{{item.dateDiffStr}}</div>
						<div style="color: #333;font-size: 15px;font-weight: bold;">
							{{item.scheduleTypeStr}}
						</div>
					</div>
		
					<div class="displayFlex">
						<div style="color:#888;display: flex;justify-content: space-between;">
							<div>{{item.problemContent}}</div>
						</div>
						<div class="ml20">
							<img src="@/assets/sIcon91.png" style="width: 40px;height:40px" />
						</div>
					</div>
				</div>
			</div>
			<!-- <el-empty v-if="completeDataList.length == 0" /> -->
		</div>

	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'
	let that
	export default {
		data() {
			return {
				dataList1: [],
				completeDataList: [],
				params: {
					startTime: moment().startOf('year').format('YYYY-MM'),
					endTime: moment().endOf('year').format('YYYY-MM'),
					scheduleType: ''
				},
				outletList: [],
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.getGoingSimpleList()
			that.pageCompleteSimpleList()
			that.getWaterOutletBaseList()
			that.getTypeList()
		},

		methods: {

			getWaterOutletBaseList() {
				that.ajax({
					url: '/waterOutlet/getWaterOutletBaseList?ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						ticketId: that.params.ticketId,
						gasOutletApproach: "ORGANIZED_OUTLET"
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.outletList = result.data
							if (!that.params.outletId) {
								that.getMonthList()
							}
						}
					},
				})
			},

			gotoDetail(item) {
				that.$router.push("/problemTicketDet?id=" + item.id)
			},

			changeDate() {
				that.getMonthList()
				that.getTypeList()
				that.pageCompleteSimpleList()
			},

			getTypeList() {
				let thisParams = JSON.parse(JSON.stringify(that.params))
				thisParams.startTime = thisParams.startTime + "-01"
				thisParams.endTime = thisParams.endTime + "-01"
				that.ajax({
					url: 'bbep/problemOrder/getTypeList',
					contentType: 'application/json',
					data: JSON.stringify(thisParams),
					success: function(result) {
						for (let item of result.data) {
							item.name = item.scheduleTypeStr
							item.value = item.num
						}
						that.formChart("chart1", result.data)
					},
				})
			},

			getMonthList() {
				let thisParams = JSON.parse(JSON.stringify(that.params))
				thisParams.startTime = thisParams.startTime + "-01"
				thisParams.endTime = thisParams.endTime + "-01"
				that.ajax({
					url: 'bbep/problemOrder/getMonthList',
					contentType: 'application/json',
					data: JSON.stringify(thisParams),
					success: function(result) {
						let xAxisData = []
						let seriesData1 = []
						for (let item of result.data) {
							xAxisData.push(item.dateStr)
							seriesData1.push(item.num || 0)
						}

						//console.log(xAxisData, seriesData1)
						var chartDom = document.getElementById('chart2');
						var myChart = echarts.init(chartDom);
						var option;

						option = {
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'shadow'
								}
							},
							legend: {},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: xAxisData,
								splitLine: {
									show: false,
								},
								axisTick: {
									show: false // 不显示坐标轴刻度线
								},
								axisLine: {
									lineStyle: {
										opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
									}
								},
							},
							yAxis: {
								type: 'value',
								splitLine: {
									show: false,
								},
								splitLine: {
									show: true,
									lineStyle: {
										color: ["#FAFBFC"],
									},
								},
								axisLabel: {
									//y轴文字的配置
									textStyle: {
										color: "rgba(215, 215, 215, 1)",
									},
									// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
								},
								axisLine: {
									lineStyle: {
										opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
									}
								},
							},
							series: [{
								data: seriesData1,
								barWidth: 30,
								itemStyle: {
									normal: {
										color: '#3A3EF4'
									}
								},
								type: 'bar'
							}]
						};

						option && myChart.setOption(option);
					},
				})
			},

			formChart(chartId, data) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						icon: 'circle',
						type: 'scroll',
						orient: 'vertical',
						left: "22%",
						top: '30%',
						formatter(name) {
							if (name) {
								/*let info = data.find((item) => item.name == name);
								return name + "                   " + info.value;*/
								let target
								for (let i = 0; i < data.length; i++) {
									if (data[i].name === name) {
										target = data[i].value
									}
								}
								var arr = [
									'{a|' + name + '}',
									'{c|' + target + '}'
								]
								return arr.join('  ')
							}
						},
						textStyle: { // 添加
							padding: [8, 0, 0, 0],
							rich: {
								a: {
									fontSize: 15,
									width: 150
								},
								c: {
									fontSize: 15,
									color: '#c1c1c1'
								}
							}
						}
					},
					series: [{
						type: 'pie',
						radius: ['15%', '25%'],
						data: data,
						labelLine: {
							show: false
						},
						center: ['50%', '15%'], // 设置饼形图的中心位置，这里是横向居中和向下偏移
						label: {
							show: false,
							position: 'center'
						},
						color: ['#8DE5A8', '#4F55C3', '#F18AD8', '#8AD4F1', '#FFD534', '#D8D8D8'],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				option && myChart.setOption(option);
			},

			pageCompleteSimpleList() {
				let thisParams = JSON.parse(JSON.stringify(that.params))
				thisParams.startTime = thisParams.startTime + "-01"
				thisParams.endTime = thisParams.endTime + "-01"
				that.ajax({
					url: 'bbep/problemOrder/pageCompleteSimpleList?ticketId=' + that.params.ticketId +
						'&pageIndex=1&pageSize=99999',
					contentType: 'application/json',
					data: JSON.stringify(thisParams),
					success: function(result) {
						that.completeDataList = result.data.records
					},
				})
			},

			getGoingSimpleList() {
				that.ajax({
					url: 'bbep/problemOrder/getGoingSimpleList',
					contentType: 'application/json',
					data: JSON.stringify({}),
					success: function(result) {

						for (let item of result.data) {
							item.active = 0
							for (let key in item.itemList) {
								if (item.itemList[key].isExist) item.active = Number(key) + 1
							}
						}
						that.dataList1 = result.data
					},
				})
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.date-item>>>.el-input__prefix,
	.date-item>>>.el-input__suffix {
		display: none !important;
	}

	.date-item>>>.el-input__inner {
		height: unset !important;
		padding: 0 2px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #555 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 13px !important;
		width: 80px !important;
	}

	.width220 {
		width: 420px;
	}

	>>>.el-step__title.is-success {
		color: #8A8A8A !important;
		font-size: 13px;
		font-weight: unset !important;
	}

	>>>.el-step__title.is-process {
		color: #8A8A8A !important;
		font-size: 13px;
		font-weight: unset !important;
	}

	>>>.el-step__title.is-wait {
		color: #8A8A8A !important;
		font-size: 13px;
		font-weight: unset !important;
	}

	>>>.el-step__head.is-success {
		color: #21D189 !important;
		border-color: #21D189 !important;
	}

	>>>.el-step__head.is-finish {
		color: #21D189 !important;
		border-color: #21D189 !important;
	}

	.step01 {
		width: 30px;
		height: 30px;
		display: inline-block;
		background-repeat: no-repeat;
		background-image: url('../../assets/sIcon90.png');
		background-size: contain;
	}

	.step02 {
		width: 30px;
		height: 30px;
		display: inline-block;
		background-repeat: no-repeat;
		background-image: url('../../assets/sIcon89.png');
		background-size: contain;
	}

	>>>.el-step__icon {
		width: 34px !important;
		height: 31px !important;
	}

	::v-deep .el-step__icon.is-text {
		border-style: hidden;
		background-color: transparent !important;
	}

	::v-deep .el-step__title.is-finish {
		color: #1d1d1d;
		font-size: 14px;
	}

	::v-deep .el-step.is-vertical .el-step__title {
		color: #1d1d1d;
		font-size: 14px;
		font-weight: normal;
	}

	::v-deep .el-step.is-vertical .el-step__line {
		width: 1px;
		top: 12px;
		bottom: 0;
		left: 11px;
		height: 55px;
		color: #b6d0d3;
		background: #b6d0d3;
	}
</style>